$(function () {
    // 需求1.点击a链接  显示隐藏
    $("#loginBox a").on("click", function () {
        // 点击登录内的a链接
        // 显示注册显示 登录隐藏
        $("#regBox").show();
        $("#loginBox").hide();

    });


    $("#regBox a").on("click", function () {
        // 点击登录a接
        // 显示登录区域,隐藏注册区域
        $("#regBox").hide();
        $("#loginBox").show();
    });

    // 需求2: 定义校验规则;
    let form = layui.form; //把layui里面的form属性,(可以直接点出来)导出直接用变量接受
    // console.log(layui.form);  //导入layui.alljs 就会出现一个标量layui
    //定义校验规则,使用的时 form里面的verify()/(通过log去控制台可以看到layui里面的form里面的verify,而只要导入layui.alljs 文件就会出现一个变量layui,而且可以直接通过点,点出来form),他的参数是 对象;
    // 参数是对象, 属性是校验名称,值是检验规则,值有两种类型,  函数和数组;
    // 直接把form里面的verify点出来
    form.verify({
        // 属性是校验名称,值是检验规则,值有两种类型,  函数和数组;
        username: [
            /^[a-zA-Z0-9]{1,10}$/,
            // a-zA-Z0-9这里面任意数字在1-10
            '用户名必须1到10位的数字和字母'
        ],
        pwd: [
            /^[a-zA-Z0-9]{6,12}$/,
            // a-zA-Z0-9这里面任意数字在6-12
            '密码必须6到12位的数字和字母'
        ],
        repwd: function (value) {
            // 获取注册列表密码框的值
            let pwd = $('#regBox input[name=password]').val()
            // 当第二个密码框的密码和第三个不一致的时候
            if (pwd !== value) {
                // 只要这里加返回值return 只要第二个不一致就会一直提示
                return '两次密码输入不一致'
            }
        }
    });
    let layer = layui.layer;
    // 需求3.注册功能  form表单  submit:表单提交事件
    $('#formReg').on('submit', function (e) {
        // 阻止表单提交   使用axios提交
        e.preventDefault();
        // 使用axios提交
        axios({
            method: 'POST',
            url: '/api/reguser',
            // serialize()方法: jq的获取参数方式  可以将表单信息序列化成一个字符串 可以通过分割字符串得到里面的值  可以获取表单里面的所有name属性  也可以说是获取参数的方式
            data: $('#formReg').serialize()
        }).then(function (res) {
            // res中有6个属性,我们打印data的属性
            // console.log(res.data);
            // res里面的data里面的status 
            if (res.data.status != 0) {
                return layer.msg(res.data.message, { icon: 5 });
            }
            // 成功后提示
            //   layer.msg赋值的样式
            layer.msg('恭喜您,用户注册成功!', { icon: 6 });
            // 切换到登录框
            $('#regBox a').click();
            // 清空列表 DOM对象中有一个方法 reset() 可以充值表单
            $("#formReg")[0].reset();
        })

    })
});
// 4.登录功能;
$('#formLogin').on('submit', function (e) {
    // 阻止表单默认提交   
    e.preventDefault();
    // 发送  axios
      axios({
        method: "POST",
        url: '/api/login',
        data: $(this).serialize()  // a=1&b=2&c=3
    }).then(function (res) {

        if (res.data.status !== 0) {
            return layer.msg(res.data.message, { icon: 5 });
        }
         // 成功后提示
        layer.msg('恭喜您，登录成功！', { icon: 6 });
       // 页面跳转
        location.href = '/index.html';
        // 保存token，后面用于身份认证 网页文档接口Authorization的值就是token
        // localStorage:永久保存
        // 保存数据:语法: localStorage.setItem('键', 值)
        localStorage.setItem('token', res.data.token);

    })


})